﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CanvasExperiment</title>
    <link rel="stylesheet" href="/winjs/css/ui-light.css" />
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/winjs/js/base.js" type="text/javascript"></script>
    <script src="/winjs/js/ui.js" type="text/javascript"></script>
    <script src="/winjs/js/wwaapp.js" type="text/javascript"></script>
    <script src="/js/default.js" type="text/javascript"></script>
    <script src="/js/canvasTool.js" type="text/javascript"></script>
</head>
<body>
    <div id="artboard">
        <canvas id="canvas"></canvas>
        <div id="panel">
			<div id="sliders" style="display: -ms-grid; -ms-grid-columns: 4fr 4fr 1fr 1fr;">
        		<input id="brushSize" type="range" value="25" min="1" max="50">
        		<input id="brushDistance" type="range" value="5" min="5" max="20">
				<button id="btnClear">Clear</button>
				<button id="btnBrush">Brush</button>
        	</div>
            <div id="colors">
                <div class="color selected" data-color="rgba(0, 0, 0, 1)"></div>
                <div class="color" data-color="rgba(255, 0, 0, 1)"></div>
                <div class="color" data-color="rgba(0, 255, 0, 1)"></div>
                <div class="color" data-color="rgba(0, 0, 255, 1)"></div>
                <div class="color" data-color="rgba(255, 255, 255, 1)"></div>
            </div>
        </div>
    </div>
</body>
</html>
